<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顶部</title>
    <style>
        .con .totop {
            position: fixed;
            bottom: 30px;
            right: 20px;
        }
    </style>
</head>

<body>
    <div class="con">
        <img class="totop" src="../img/快乐加倍.png" width="50px" height="50px" alt="回顶部" title="回顶部">
        <h1>00000001</h1>
        <h1>00000002</h1>
        <h1>00000003</h1>
        <h1>00000004</h1>
        <h1>00000005</h1>
        <h1>00000006</h1>
        <h1>00000007</h1>
        <h1>00000008</h1>
        <h1>00000009</h1>
        <h1>00000010</h1>
        <h1>00000011</h1>
        <h1>00000012</h1>
        <h1>00000013</h1>
        <h1>00000014</h1>
        <h1>00000015</h1>
        <h1>00000016</h1>
        <h1>00000017</h1>
        <h1>00000018</h1>
        <h1>00000019</h1>
        <h1>00000020</h1>
        <h1>00000021</h1>
        <h1>00000022</h1>
        <h1>00000023</h1>
        <h1>00000024</h1>
        <h1>00000025</h1>
        <h1>00000026</h1>
        <h1>00000027</h1>
        <h1>00000028</h1>
        <h1>00000029</h1>
        <h1>00000030</h1>
        <h1>00000031</h1>
        <h1>00000032</h1>
        <h1>00000033</h1>
        <h1>00000034</h1>
        <h1>00000035</h1>
        <h1>00000036</h1>
        <h1>00000037</h1>
        <h1>00000038</h1>
        <h1>00000039</h1>
        <h1>00000040</h1>
        <h1>00000041</h1>
        <h1>00000042</h1>
        <h1>00000043</h1>
        <h1>00000044</h1>
        <h1>00000045</h1>
        <h1>00000046</h1>
        <h1>00000047</h1>
        <h1>00000048</h1>
        <h1>00000049</h1>
        <h1>00000050</h1>
        <h1>00000051</h1>
        <h1>00000052</h1>
        <h1>00000053</h1>
        <h1>00000054</h1>
        <h1>00000055</h1>
        <h1>00000056</h1>
        <h1>00000057</h1>
        <h1>00000058</h1>
        <h1>00000059</h1>
        <h1>00000060</h1>
        <h1>00000061</h1>
        <h1>00000062</h1>
        <h1>00000063</h1>
        <h1>00000064</h1>
        <h1>00000065</h1>
        <h1>00000066</h1>
        <h1>00000067</h1>
        <h1>00000068</h1>
        <h1>00000069</h1>
        <h1>00000070</h1>
        <h1>00000071</h1>
        <h1>00000072</h1>
        <h1>00000073</h1>
        <h1>00000074</h1>
        <h1>00000075</h1>
        <h1>00000076</h1>
        <h1>00000077</h1>
        <h1>00000078</h1>
        <h1>00000079</h1>
        <h1>00000080</h1>
        <h1>00000081</h1>
        <h1>00000082</h1>
        <h1>00000083</h1>
        <h1>00000084</h1>
        <h1>00000085</h1>
        <h1>00000086</h1>
        <h1>00000087</h1>
        <h1>00000088</h1>
        <h1>00000089</h1>
        <h1>00000090</h1>
        <h1>00000091</h1>
        <h1>00000092</h1>
        <h1>00000093</h1>
        <h1>00000094</h1>
        <h1>00000095</h1>
        <h1>00000096</h1>
        <h1>00000097</h1>
        <h1>00000098</h1>
        <h1>00000099</h1>
        <h1>00000100</h1>
    </div>
    <script>
        //1.直接到位
        document.getElementsByClassName("totop")[0].onclick = function () {
            // alert()
            // document.documentElement.scrollTop = 0;
            // document.body.scrollTop = 0;
            ScrollTop(500, 100);
        }
        //动画函数
        const ScrollTop = (number = 0, time) => {
            if (!time) {
                document.body.scrollTop = document.documentElement.scrollTop = number;
                return number;
            }
            const spacingTime = 20; // 设置循环的间隔时间  值越小消耗性能越高
            let spacingInex = time / spacingTime; // 计算循环的次数
            let nowTop = document.body.scrollTop + document.documentElement.scrollTop; // 获取当前滚动条位置
            let everTop = (number - nowTop) / spacingInex; // 计算每次滑动的距离
            let scrollTimer = setInterval(() => {
                if (spacingInex > 0) {
                    spacingInex--;
                    ScrollTop(nowTop += everTop);
                } else {
                    clearInterval(scrollTimer); // 清除计时器
                }
            }, spacingTime);
        };
    </script>
</body>

</html>